<script lang="ts" setup>
import { ref, watch, provide, nextTick } from 'vue';
import { RouterLink, RouterView } from 'vue-router'

const cachedComponents = ref(['Home', 'Profile', 'Works']); // 默认缓存这些组件

// 监听路由变化，临时移除某个组件的缓存（例如用户操作后）
function disableCacheFor(componentNameList : string[]) {
  componentNameList.forEach(name => {
    cachedComponents.value = cachedComponents.value.filter(n => n !== name);
    // 下一帧再恢复缓存（确保组件已重新渲染）
    nextTick(() => {
      cachedComponents.value.push(name);
    });
  });
}
provide('disableCacheFor', disableCacheFor);
</script>  


<template>
    <!-- <router-view></router-view> -->

    <router-view v-slot="{ Component }">
      <!--通过v-slot获取【当前路由组件】，并将其赋值给Component变量 -->
      <keep-alive :include="cachedComponents">
        <component :is="Component" />
      </keep-alive>
    </router-view>

</template>



<style lang="scss">

    
</style>